<template>
	<view class="content">
		<view class="searchs">
			<uni-datetime-picker class="datepicker" type="date" placeholder="请选择开始时间"
				:end="new Date(searchData.endCreateTime).getTime()" :clear-icon="true"
				v-model="searchData.startCreateTime" />
			<uni-datetime-picker class="datepicker" type="date" placeholder="请选择结束时间" :end="new Date().getTime()"
				:clear-icon="true" v-model="searchData.endCreateTime" />
		</view>
		<view class="search-bars">
			<uni-search-bar class="search-input" radius="5" @confirm="doSearch" @clear="doClear"
				v-model="searchData.equipCode" clearButton="auto" cancelButton="none" placeholder="请输入柜号">
			</uni-search-bar>
			<uni-icons type="search" size="32" color="#999999" @click="doSearch()"></uni-icons>
		</view>
		<uni-list>
			<uni-list-item v-for="(item,index) in warnList" :key="index" clickable @click="goDetail(item)"
				:title="(item.taskId?'批量升级':'单柜升级')  +' '+(item.partTypeName?item.partTypeName:'')" :note="item.createTime">
				<template slot="footer">
					<uni-icons type="more-filled" size="18"></uni-icons>
				</template>
			</uni-list-item>
		</uni-list>

		<view v-show="isLoadMore && warnList.length >0">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>

		<view class="nodata" v-if="warnList.length == 0">
			<image class="empty_img" src="/static/images/empty.png" mode="widthFix"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {
		equipment
	} from "@/api/my.js";
	import {
		removeNullUndefined,
		doCopy
	} from "@/common/index.js";
	export default {
		data() {
			return {
				warnList: [],
				page: 1, //页码
				size: 12,

				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				refresh: false, // 下拉刷新标示
				searchData: {
					equipCode: "",
					startCreateTime: "",
					endCreateTime: "",
				},
			}
		},
		created() {
			this.getDataList();
		},
		methods: {
			getDataList() {
				this.$Toast.loading('加载中');
				let param = `?pageNum=${this.page}&pageSize=${this.size}`;
				if (this.searchData.equipCode) {
					param += `&equipCode=${this.searchData.equipCode}`;
				}
				if (this.searchData.startCreateTime) {
					param += `&startCreateTime=${this.searchData.startCreateTime}`;
				}
				if (this.searchData.endCreateTime) {
					param += `&endCreateTime=${this.searchData.endCreateTime}`;
				}
				equipment(`/upgrade/log/group${param}`, 'post').then(res => {
						if (res.code == 200) {
							let datas = res.data;
							this.warnList = this.page == 1 ? datas : this.warnList.concat(datas);
							if (datas.length < this.size) { //小于size数，停止请求
								this.isLoadMore = true;
								this.loadStatus = 'nomore';
							} else {
								this.isLoadMore = false;
							}
							uni.hideLoading();
							if (this.refresh) {
								uni.stopPullDownRefresh();
								this.refresh = false;
							}
						}
					})
					.catch(error => {
						uni.hideLoading();
						this.isLoadMore = false;
					});

			},
			doSearch() {
				// if (!this.searchData.equipCode && !this.searchData.startCreateTime && !this.searchData.endCreateTime) {
				// 	this.$Toast.none('请输入搜索内容~');
				// 	return;
				// }
				this.getDataList();
			},
			doClear() {
				this.searchData.equipCode = "";
				this.getDataList();
			},
			
			onPullDownRefresh() {
				this.page = 1;
				this.getDataList();
				this.refresh = true;
			},
			onReachBottom() {
				if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
					this.isLoadMore = true;
					this.page++;
					this.getDataList();
				}
			},
			goDetail(item) {
				let detail = JSON.stringify(item);
				uni.navigateTo({
					url: `/pagesA/my/updateLog/logDetail?detail=${detail}`
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont.css";
	@import "@/static/css/common.scss";

	/deep/ .uni-list-item__container {
		align-items: center;
	}

	.searchs {
		padding: 20rpx 20rpx 0;
		@include flexLayout(center, center);

		.datepicker {
			width: 48%;
		}

		/deep/ .uni-date:first-child {
			margin-right: 3%;
		}
	}

	.search-bars {
		@include flexLayout(center, space-between);
		padding-right: 20rpx;

		.search-input {
			width: 96%;
		}
	}
</style>
